pre.codeblock-pre {
  display: inline-flex;
  justify-content: left;
  text-align: left;
  align-items: left;
  align-content: left;
  flex-wrap: nowrap;
  flex-direction: row;
  overflow: hidden !important;
  margin: 0;
  font-size: .9rem;
  border-radius: 4px;
  width: 100%;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4);
  background-color: #212529 !important;
  max-width: 700px;
}

.codeblock {
  width: 100%;
  display: inline-flex;
  overflow: auto;
  justify-content: left;
  color: #f8f9fa;
  margin: 0px;
  padding: 0px;
}

.clipboardjs {
  width: 100%;
  overflow: hidden;
  font-size: .9rem;
  margin: 0px;
  color: #f8f9fa;
  display: flex;
  align-items: center;

  &::-webkit-scrollbar {
    width: 0.5rem !important;
    height: 0.5rem !important;
    padding: 6px;
  }

  &::-webkit-scrollbar-track {
    width: 0.5rem !important;
    height: 0.5rem !important;
    border-radius: 11px;
    overflow: hidden;
    padding: 6px;
  }
  &::-webkit-scrollbar-thumb {
    background: #868e96;
    width: 0.5rem !important;
    height: 0.5rem !important;
    border-radius: 11px;
    margin: 5px;
  }
}

.btn-copy-wrap {
  align-content: flex-end;
  z-index: auto;
  position: relative;
  text-align: right;
}

.clipbtn {
  right: 0;
  margin: 5px;
  border: 0px;
  background-color: transparent;
  font-size: 1.05rem;
  & i::before {
    color: #f1f3f5 !important;
  }
}

.clipbtn:hover {
  color: #fff;
  cursor: pointer;
}

.clipbtn:active{
  background-color: #495057;
  transform: scale(0.75);
}
